<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<audio loop=true autoplay="autoplay" src="img/somethingjustlikethis.mp3"></audio>
		<canvas id="myCanvas" width="1350" height="600"> </canvas>

		<script type="text/javascript">
			var canvas = document.getElementById("myCanvas");
			var ctx = canvas.getContext("2d");
			//			ctx.beginPath();
			//			ctx.fillStyle = "orange";
			//			ctx.fillRect(0, 0, 1350, 600);
			//			ctx.fill();
			var shubiao = [];
			window.onmousemove = function(event) {
				var vx = Math.random() * 12 - 7; //0-12x方向的力 -7相当于交叉 +7往外阔
				var vy = Math.random() * 12 - 7;
				var color = "rgb(" + parseInt(Math.random() * 256) + "," + parseInt(Math.random() * 256) + "," + parseInt(Math.random() * 256) + ")";
				shubiao.push([event.offsetX, event.offsetY, 30, vx, vy, color]);
			}

			var arcArr = [
				[

					[0, 0, 1, 1, 1, 0, 0],
					[0, 1, 1, 0, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 0, 1, 1, 0],
					[0, 0, 1, 1, 1, 0, 0]
				], //0
				[
					[0, 0, 0, 1, 1, 0, 0],
					[0, 1, 1, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[1, 1, 1, 1, 1, 1, 1]
				], //1
				[
					[0, 1, 1, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 1, 1, 0, 0, 0, 0],
					[1, 1, 0, 0, 0, 0, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 1, 1, 1, 1, 1]
				], //2
				[
					[1, 1, 1, 1, 1, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 1, 0, 0],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0]
				], //3
				[
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 1, 0],
					[0, 0, 1, 1, 1, 1, 0],
					[0, 1, 1, 0, 1, 1, 0],
					[1, 1, 0, 0, 1, 1, 0],
					[1, 1, 1, 1, 1, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 1, 1]
				], //4
				[
					[1, 1, 1, 1, 1, 1, 1],
					[1, 1, 0, 0, 0, 0, 0],
					[1, 1, 0, 0, 0, 0, 0],
					[1, 1, 1, 1, 1, 1, 0],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0]
				], //5
				[
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 1, 1, 0, 0, 0, 0],
					[1, 1, 0, 0, 0, 0, 0],
					[1, 1, 0, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0]
				], //6
				[
					[1, 1, 1, 1, 1, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 0, 1, 1, 0, 0, 0]
				], //7
				[
					[0, 1, 1, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0]
				], //8
				[
					[0, 1, 1, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 1, 1, 0, 0, 0, 0]
				], //9
				[
					[0, 0, 0, 0],
					[0, 0, 0, 0],
					[0, 1, 1, 0],
					[0, 1, 1, 0],
					[0, 0, 0, 0],
					[0, 0, 0, 0],
					[0, 1, 1, 0],
					[0, 1, 1, 0],
					[0, 0, 0, 0],
					[0, 0, 0, 0]
				] //冒号:
			];

			//自行车
			var rot = 0;
			var jiaodu = 5;
			var R = 100;
			var arcX = 1500;
			var arcY = 500;

			var huchang = jiaodu * Math.PI * R / 180;
			var fx1 = 5; //增加的角度
			var arcXi = 1800;
			var arcYi = 500;
			var ro = 0;
			var huchang2 = fx1 * Math.PI * 100 / 180;
			//自行车

			var text = [0, 0, 10, 0, 0, 10, 5, 2];
			var img = new Image();
			img.src = "img/e3b4009da6d2625ee115d5e3e80aed85_game_ctwall_177701_4.jpg";
			var date = new Date();
			var balls = [];
			img.onload = function() {
				//鼠标效果
				setInterval(function() {
					ctx.clearRect(0, 0, 1350, 700);
					ctx.drawImage(img, 0, 0);

					for(var i = 0; i < shubiao.length; i++) {

						ctx.beginPath();
						ctx.fillStyle = shubiao[i][5];
						ctx.arc(shubiao[i][0], shubiao[i][1], shubiao[i][2], 0, 2 * Math.PI);
						ctx.fill();
						ctx.closePath();

						shubiao[i][0] = shubiao[i][0] + shubiao[i][3];
						shubiao[i][1] = shubiao[i][1] + shubiao[i][4];
						shubiao[i][2] = shubiao[i][2] - 1;
						if(shubiao[i][2] < 0) {
							shubiao.splice(i, 1);
						}
					}

					//获得当前时间 并打印出来
					var time = new Date();
					if(time.getMinutes() != date.getMinutes()) {
						var mgw = date.getMinutes() % 10;
						addBalls(640, 100, mgw);
						var msw1 = parseInt(time.getMinutes() / 10);
						var msw2 = parseInt(date.getMinutes() / 10);
						if(msw2 != msw1) {
							addBalls(480, 100, msw2);
						}
										
					}
					if(time.getSeconds() != date.getSeconds()) {
						var gw = date.getSeconds() % 10;
						addBalls(1020, 100, gw);
						var sw1 = parseInt(time.getSeconds() / 10);
						var sw2 = parseInt(date.getSeconds() / 10);
						if(sw2 != sw1) {
							addBalls(860, 100, sw2);
						}

					}

					if(time.getHours() != date.getHours()) {
						var hgw = date.getMinutes() % 10;
						addBalls(260, 100, hgw);
						var hsw1 = parseInt(time.getMinutes() / 10);
						var hsw2 = parseInt(date.getMinutes() / 10);
						if(hsw2 != hw1) {
							addBalls(100, 100, hgw2);
						}
					}
					date = time;

					//var date = new Date();
					text[0] = parseInt(date.getHours() / 10);
					text[1] = date.getHours() % 10;
					text[3] = parseInt(date.getMinutes() / 10);
					text[4] = date.getMinutes() % 10;
					text[6] = parseInt(date.getSeconds() / 10);
					text[7] = date.getSeconds() % 10;
					//修改冒号距离
					for(var i = 0; i < text.length; i++) {
						if(i == 2) {
							drawNumber(i * 160 - 10, 10, text[i]);
						} else if(i == 3 || i == 4) {
							drawNumber(i * 160 - 90, 10, text[i]);
						} else if(i == 5) {
							drawNumber(i * 160 - 110, 10, text[i]);
						} else if(i == 6 || i == 7) {
							drawNumber(i * 160 - 190, 10, text[i]);
						} else {
							drawNumber(i * 160 + 10, 10, text[i]);
						}

					} //打印小球
					drawBalls();
					//ctx.fillRect(0, 0, 1300, 500);
					//自行车
					var y2 = Math.sin(rot / 180 * Math.PI) * 0.5 * R;
					var x2 = Math.cos(rot / 180 * Math.PI) * 0.5 * R;
					ctx.beginPath();
					ctx.arc(arcX, arcY, R, (rot / 180) * Math.PI, (1 + rot / 180) * Math.PI);
					ctx.fillStyle = "#B0C4DE";
					ctx.fill();
					ctx.beginPath();
					ctx.arc(arcX, arcY, R, (rot / 180) * Math.PI, (1 + rot / 180) * Math.PI, true);
					ctx.fillStyle = "black";
					ctx.fill();

					ctx.beginPath();
					ctx.arc(arcX + x2, arcY + y2, 0.5 * R, 0, 2 * Math.PI);
					ctx.fillStyle = "black";
					ctx.fill();

					ctx.beginPath();
					ctx.arc(arcX - x2, arcY - y2, 0.5 * R, 0, 2 * Math.PI);
					ctx.fillStyle = "#B0C4DE";
					ctx.fill();
					ctx.beginPath();
					ctx.arc(arcX - x2, arcY - y2, 0.1 * R, 0, 2 * Math.PI);
					ctx.fillStyle = "bisque";
					ctx.fill();
					ctx.beginPath();
					ctx.arc(arcX + x2, arcY + y2, 0.1 * R, 0, 2 * Math.PI);
					ctx.fillStyle = "bisque";
					ctx.fill();

					ctx.beginPath();
					ctx.lineWidth = 3;
					ctx.arc(arcX + 150, arcY, 0.2 * R, 0, 2 * Math.PI);
					ctx.fillStyle = "white";
					ctx.closePath();
					ctx.stroke();

					ctx.beginPath();
					ctx.lineWidth = 3;
					ctx.fillStyle = "white";
					ctx.moveTo(arcX, 500);
					ctx.lineTo(arcX + 75, 350);
					ctx.lineTo(arcX + 150, 500);
					ctx.stroke();

					ctx.beginPath();
					ctx.lineWidth = 3;
					ctx.fillStyle = "white";
					ctx.lineTo(arcX + 75, 350);
					ctx.lineTo(arcX + 70, 310);
					ctx.stroke();

					ctx.beginPath();
					ctx.lineWidth = 3;
					ctx.fillStyle = "white";
					ctx.lineTo(arcX + 70, 310);
					ctx.lineTo(arcX + 46, 310);
					ctx.stroke();

					ctx.beginPath();
					ctx.lineWidth = 1;
					ctx.fillStyle = "white";
					ctx.lineTo(arcX + 75, 350);
					ctx.lineTo(arcXi - 75, 350);
					ctx.stroke();

					ctx.beginPath();
					ctx.lineWidth = 3;
					ctx.fillStyle = "white";
					ctx.lineTo(arcX + 75, 350);
					ctx.lineTo(arcXi - 75, 350);
					ctx.stroke();
					//脚蹬子
					ctx.beginPath();
					ctx.lineWidth = 1;
					ctx.fillStyle = "white";

					ctx.lineTo(arcX + 150, arcY + 30);
					ctx.lineTo(arcX + 150, arcY - 35);

					ctx.stroke();

					ctx.beginPath();
					ctx.lineWidth = 1;
					ctx.fillStyle = "white";
					ctx.lineTo(arcX + 145, arcY + 30);
					ctx.lineTo(arcX + 155, arcY + 30);
					ctx.stroke();

					ctx.beginPath();
					ctx.lineWidth = 1;
					ctx.fillStyle = "white";
					ctx.lineTo(arcX + 145, arcY - 35);
					ctx.lineTo(arcX + 155, arcY - 35);
					ctx.stroke();
					//车把

					ctx.beginPath();
					ctx.lineWidth = 3;
					ctx.arc(arcX + 65, 320, 0.2 * R, 2 / 6 * Math.PI, 7 / 6 * Math.PI);
					ctx.fillStyle = "white";
					ctx.stroke();

					rot = rot - jiaodu; //车轮逆向旋转
					arcX = arcX - huchang; //车子移动与角度旋转相对应

					if(arcX < -400) {
						arcX = 1500;
					}

					var y1 = Math.sin(ro / 180 * Math.PI) * 50;
					var x1 = Math.cos(ro / 180 * Math.PI) * 50;
					//								var fx1 = 5;
					//								var R=100;
					ctx.beginPath();
					ctx.arc(arcXi, arcYi, 100, (ro / 180) * Math.PI, (1 + ro / 180) * Math.PI);
					ctx.fillStyle = "#B0C4DE";
					ctx.fill();
					ctx.beginPath();
					ctx.arc(arcXi, arcYi, 100, (ro / 180) * Math.PI, (1 + ro / 180) * Math.PI, true);
					ctx.fillStyle = "black";
					ctx.fill();

					ctx.beginPath();
					ctx.arc(arcXi + x1, arcYi + y1, 50, 0, 2 * Math.PI);
					ctx.fillStyle = "black";
					ctx.fill();

					ctx.beginPath();
					ctx.arc(arcXi - x1, arcYi - y1, 50, 0, 2 * Math.PI);
					ctx.fillStyle = "#B0C4DE";
					ctx.fill();
					ctx.beginPath();
					ctx.arc(arcXi - x1, arcYi - y1, 10, 0, 2 * Math.PI);
					ctx.fillStyle = "bisque";
					ctx.fill();
					ctx.beginPath();
					ctx.arc(arcXi + x1, arcYi + y1, 10, 0, 2 * Math.PI);
					ctx.fillStyle = "bisque";
					ctx.fill();

					ctx.beginPath();
					ctx.lineWidth = 3;
					ctx.fillStyle = "white";
					ctx.moveTo(arcXi, 500);
					ctx.lineTo(arcXi - 150, 500);
					ctx.lineTo(arcXi - 75, 350);
					ctx.lineTo(arcXi, 500);
					ctx.closePath();
					ctx.stroke();

					ctx.beginPath();
					ctx.lineWidth = 3;
					ctx.fillStyle = "white";
					ctx.lineTo(arcXi - 75, 350);
					ctx.lineTo(arcXi - 60, 330);
					ctx.closePath();
					ctx.stroke();

					ctx.beginPath();
					ctx.lineWidth = 3;
					ctx.fillStyle = "white";
					ctx.lineTo(arcXi - 45, 330);
					ctx.lineTo(arcXi - 75, 330);
					ctx.closePath();
					ctx.stroke();

					arcXi = arcXi - huchang2;
					ro = ro - fx1;

					if(arcXi < -100) {
						arcXi = 1800;
					}
					//自行车
				}, 33);
			};
			//画出与数字一样的小球爆破出来
			function addBalls(ball1X, ball1Y, number) {
				for(i = 0; i < arcArr[number].length; i++) {
					var t1 = i * 20;//小球圆心
					for(k = 0; k < arcArr[number][i].length; k++) {
						var l1 = k * 20;
						if(arcArr[number][i][k] == 1) {
							var vx = Math.random() * 5 + 6;
							if(Math.random() > 0.5) {
								vx = -vx;
							}
							var vy = Math.random() * 10 + 5;
							if(Math.random() > 0.5) {
								vy = -vy;
							}
							var r = parseInt(Math.random() * 256);
							var g = parseInt(Math.random() * 256);
							var b = parseInt(Math.random() * 256);
							var a = Math.random() * 256;
							var color = "rgba(" + r + "," + g + "," + b + "," + a + ")";
							balls.push([ball1X + l1, ball1Y + t1, 10, vx, vy, color]);
						}
					}

				}
			}
			//画出小球 小球的条件
			function drawBalls() {
				var count = 0;
				for(var i = 0; i < balls.length; i++) {
					ctx.beginPath();
					ctx.fillStyle = balls[i][5];
					//				var arcX=arcArr[0][0];
					//				var arcY=arcArr[0][1];
					//				var arcr=arcArr[0][2];
					//				var arcVX=arcArr[0][3];
					//				var arcVY=arcArr[0][4];
					ctx.arc(balls[i][0], balls[i][1], balls[i][2], 0, 2 * Math.PI);
					ctx.fill();
					balls[i][0] = balls[i][0] + balls[i][3];
					balls[i][1] = balls[i][1] + balls[i][4];
					balls[i][4] = balls[i][4] + 5;  //向下走的力越来越快
					balls[i][2] = balls[i][2] - Math.random()*0.2 ;
					

					//						if(balls[i][2]<Math.random()*3){
					//						balls.splice(i,1);
					//					}
					if(balls[i][1] > canvas.height - balls[i][2]) {
						balls[i][1] = canvas.height - balls[i][2];
						balls[i][4] = -balls[i][4] * 0.7;
						//arcArr[i][1] = 650 - arcArr[i][2];

					}
					if(balls[i][2] < Math.random() * 2) {
						balls.splice(i,1);

					}

				}
			}

			function drawNumber(arcX, arcY, num) {
				var arcArr1 = arcArr[num];

				var r = 10;
				var s = parseInt(Math.random() * 256);
				var g = parseInt(Math.random() * 256);
				var b = parseInt(Math.random() * 256);
				//n代表第几个数组，i代表数组的第几行，j代表数组的第几列

				ctx.fillStyle = "#000000";
				for(var i = 0; i < arcArr1.length; i++) {
					var y = 2 * r * i + arcY;

					for(var j = 0; j < arcArr1[i].length; j++) {
						if(arcArr1[i][j] == 1) {

							ctx.beginPath();
							var x = 2 * r * j + arcX; //画圆
							//								ctx.arc(x, y, r, 0, 2 * Math.PI);
							ctx.fillRect(x, y, 15, 15);
							ctx.fill();

						}

					}
				}

			}
		</script>
	</body>

</html>